<template>
	<view class="tel-container">
		<view class="tel-content flex-center">
			<input type="number" v-model="text" class='hidden-ipt' @input="setValue" maxlength="11"></input>
			<view class="tel-temp flex-normal">
				<text :class="['tel-txt',tel.length < 1 && 'placehoder-txt']">{{tel.length >= 1 ? tel[0] : '0'}}</text>
				<text :class="['tel-txt',tel.length < 2 && 'placehoder-txt']">{{tel.length >= 2 ? tel[1] : '0'}}</text>
				<text :class="['tel-txt',tel.length < 3 && 'placehoder-txt']">{{tel.length >= 3 ? tel[2] : '0'}}</text>
			</view>
			<view class="tel-temp tel-temp-center flex-normal">
				<text :class="['tel-txt',tel.length < 4 && 'placehoder-txt']">{{tel.length >= 4 ? tel[3] : '0'}}</text>
				<text :class="['tel-txt',tel.length < 5 && 'placehoder-txt']">{{tel.length >= 5 ? tel[4] : '0'}}</text>
				<text :class="['tel-txt',tel.length < 6 && 'placehoder-txt']">{{tel.length >= 6 ? tel[5] : '0'}}</text>
				<text :class="['tel-txt',tel.length < 7 && 'placehoder-txt']">{{tel.length >= 7 ? tel[6] : '0'}}</text>
			</view>
			<view class="tel-temp flex-normal">
				<text :class="['tel-txt',tel.length < 8 && 'placehoder-txt']">{{tel.length >= 8 ? tel[7] : '0'}}</text>
				<text :class="['tel-txt',tel.length < 9 && 'placehoder-txt']">{{tel.length >= 9 ? tel[8] : '0'}}</text>
				<text :class="['tel-txt',tel.length < 10 && 'placehoder-txt']">{{tel.length >= 10 ? tel[9] : '0'}}</text>
				<text :class="['tel-txt',tel.length < 11 && 'placehoder-txt']">{{tel.length >= 11 ? tel[10] : '0'}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	// import {getCode} from '@/common/api/common.js'
	export default {
		props: {
			value: {
				type: String,
				default: () => ''
			}
		},
		watch: {
			value: {
				handler: function(val) {
					if(!val) return
					this.tel = val.split('')
					this.text = val
				},
				immediate: true
			},
		},
		data() {
			return {
				boo: {
					canTap: true
				},
				tips: '获取验证码',
				timer: null,
				seconds: 60,
				tel: [],
				text: '',
			};
		},
		methods: {
			setValue(event){
				let _self = this
				let value = event.detail.value
				_self.$nextTick(() => {
					_self.tel = value.split('')
					_self.text = value
					_self.$emit('input', value)
					if(_self.tel.length == 11){
						// uni.hideKeyboard()
					}
				})
			},
			getCode() {
				let _self = this, api = Function
				if(!_self.tel || _self.tel == '') return uni.$u.toast('手机号不能为空')
				if(!uni.$u.test.mobile(_self.tel)) return  uni.$u.toast('请输入正确格式的手机号')
				api = getCode({phonenumber: _self.phonenumber})
				if (_self.boo.canTap) {
					uni.showLoading({
						title: '正在获取验证码'
					})
					_self.boo.canTap = false
					_self.startTimer()
					api.then(res => {
						uni.$u.toast('验证码已发送');
						_self.$emit('success')
					}).catch((err) => {
						uni.hideLoading();
						_self.seconds = 60
						_self.boo.canTap = true
						_self.tips = '获取验证码'
						clearInterval(_self.timer)
					})
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
		},
		beforeDestroy() {
			this.boo.canTap = true
			this.tips = '获取验证码'
			this.timer = null
			this.seconds = 60
		}
	}
</script>

<style lang="scss" scoped>
	@mixin fontStyle($color, $size, $weight: 500) {
		color: $color;
		font-size: $size;
		font-weight: $weight;
	}
	.tel-container{
		.tel-content{
			margin: auto;
			position: relative;
			.hidden-ipt{
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				height: auto;
				line-height: inherit;
				color: transparent;
			}
		}
		.tel-temp{
			padding: 0 18rpx 10rpx;
			border-bottom: 1rpx solid #e7e6e4;
		}
		.tel-txt{
			padding: 0 2rpx;
			@include fontStyle(#000, 36rpx);
			&.placehoder-txt{
				@include fontStyle(#999, 36rpx);
			}
		}
	}

</style>
